<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .table-hover>tbody>tr:hover {
            background-color:pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <table class="table table-striped table-bordered table-hover table-condensed"><!--table-striped隔行显示颜色-->
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr class="danger">
                <td>张三</td>
                <td>男</td>
                <td>12</td>
            </tr>
            <tr class="warning">
                <td>张三</td>
                <td>男</td>
                <td>12</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>12</td>
            </tr>
        </table>
    </div>
<script>
    /*在bootstrap里 给标签<table》添加.table类可以为其赋予基本的样式，
    少量的内补(padding)和水平方向的分割线
    增加一个类名即可
    隔行显示颜色  table-striped
    加边框   table-bordered
    鼠标悬停table-havor类可以让<tbody>中的每一行对鼠标悬停状态做出反应
    紧缩 table-condensed
    通过这些状态类可以为行或单元格设置颜色。
        .active	鼠标悬停在行或单元格上时所设置的颜色
        .success	标识成功或积极的动作
        .info	标识普通的提示信息或动作
        .warning	标识警告或需要用户注意
        .danger	标识危险或潜在的带来负面影响的动作

    *
    *
    * */
</script>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</html>